<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>

<style type="text/css">

    .triangle{
        width:0px;
        height:0px;
        border-right:6px solid transparent;
        border-left:6px solid transparent;
        border-bottom:6px solid #0984e3;

    }
    .line{
        border-bottom:2px solid #0984e3;
    }

    .btn_sel3, #btn_on1, #btn_on2, #btn_on3, #btn_on4{
        border: 1px solid #d1d1d1;
        border-radius: 3px;
        background: #fff;
        -webkit-box-shadow: 0 1px 0 #ccc;
        box-shadow: 0 1px 0 #ccc;
        font-size: 14px;
        height: 20px;
        margin-right: 10px;
    }

    td:first-child {
        text-align: right;
        padding-right: 20px;
    }

    table{
        border-collapse:separate;
        border-spacing:0px 14px;
    }

    #img-upload{
        display: none;
    }

    /*需要切换的hover类*/
    .hover3{
        /*background-color: #5352ed;*/
        color:  #3742fa;
        /*font-weight: bold;*/
    }

</style>

<script type="text/javascript">
   $('tr').find('td:eq(2)').hide();

    $('#btn_on1').click(function () {
        $('table').css('border-spacing','0px 10px');
        $('tr').find('td:eq(1)').hide();
        $('tr').find('td:eq(2)').show();
    });

    $('.btn_sel3').click(function () {

       // alert($(this).css("display") == "none");

        if($(this).parent().next().css("display") == "none"){

            $('.btn_sel3').parent().next().hide();
            $('.btn_sel3').toggleClass("glyphicon-minus");
            $('.btn_sel3').toggleClass("glyphicon-plus");
            $('.btn_sel3').next().html("编辑&nbsp;&nbsp;");

            $(this).addClass("glyphicon-minus");
            $(this).removeClass("glyphicon-plus");
            $(this).parent().next().show();
            $(this).next().html("收起&nbsp;&nbsp;")
        }else{
            $(this).parent().next().hide();
            $(this).toggleClass("glyphicon-minus");
            $(this).toggleClass("glyphicon-plus");
            $(this).next().html("编辑&nbsp;&nbsp;");
        }

    });

   $('#btn_on3').click(function () {
       $('#img-upload').click();
   });

   // 鼠标移入移出事件
   $('.btn_sel33').hover(function() {
       // 鼠标移入时添加hover类
       $(this).addClass('hover3')
   }, function() {
       // 鼠标移出时移出hover类
       $(this).removeClass('hover3')
   });

</script>

<body>

<div style="width: 93%;margin-left: 30px;padding-bottom: 20px">
    <div class="row" style=" margin-bottom:15px;">
        <div>
            <span style="font-size: 25px; color: #0984e3 ">我的优惠券</span>
        </div>
        <div class="triangle" style="margin-left: 20px"></div>
        <div class="line"></div>

        <div style="width: 100%; height: 40px; padding-left:20px;padding-top: 10px; background-color: #c8d6e5;margin-top: 10px;
                 -moz-box-shadow: 0px 0px 2px  #909090;-webkit-box-shadow: 0px 0px 2px  #909090;">
            <span>我的信息</span>
            <button class="btn_sel3 glyphicon glyphicon-minus"  style="float: right"></button>
            <span  style="float: right;">收起&nbsp;&nbsp;</span>
        </div>
        <div style="background-color:#ffffff; border: 1px solid #dbdbdb;height: 350px;display: block">

            <div style="padding-top: 25px;font-size: 12px; margin-left: 80px">

                <table>
                    <tr>
                        <td>
                            <span>手机</span>
                        </td>
                        <td>
                            <span>86-13525592125</span>
                            &nbsp;&nbsp;
                            <a href="#">修改</a>
                        </td>
                        <td>
                            <span>86-13525592125</span>
                            &nbsp;&nbsp;
                            <a href="#">修改</a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span>邮箱</span>
                        </td>
                        <td>
                            <span>未填写</span>
                            &nbsp;&nbsp;
                            <a href="#">验证</a>
                        </td>
                        <td>
                            <span>未填写</span>
                            &nbsp;&nbsp;
                            <a href="#">验证</a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span>昵称</span>
                        </td>
                        <td>
                            <span>未设置</span>
                        </td>
                        <td>
                            <input type="text" value="" name="">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span>姓名</span>
                        </td>
                        <td>
                            <span>未设置</span>
                        </td>
                        <td>
                            <input type="text" value="" name="">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span>性别</span>
                        </td>
                        <td>
                            <span>未设置</span>
                        </td>
                        <td>
                            <input type="radio" name="sex" value="">男
                            &nbsp;&nbsp;
                            <input type="radio" name="sex" value="">女
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span>生日</span>
                        </td>
                        <td>
                            <span>未设置</span>
                        </td>
                        <td>
                            <input type="date" value="" name="">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span>联系电话</span>
                        </td>
                        <td>
                            <span>未设置</span>
                        </td>
                        <td>
                            <input type="number" value="" name="" placeholder="电话">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span>常用出发城市</span>
                        </td>
                        <td>
                            <span>未设置</span>
                        </td>
                        <td>
                            <select>
                                <option></option>
                                <option>北京</option>
                                <option>上海</option>
                            </select>
                            省
                            <select>
                                <option></option>
                                <option>北京</option>
                                <option>上海</option>
                            </select>
                            市
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <button id="btn_on1" class="btn_sel33" >编辑</button>
                        </td>
                        <td>
                            <span style="color: #8395a7">为了更好地帮助您查询、使用携程网提供的产品，您可以在此设置您的常用出发城市。</span>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td>
                            <button id="btn_on2" class="btn_sel33" >保存</button>
                        </td>
                    </tr>
                </table>

            </div>

        </div>
    </div>

    <div class="row">
        <div style="width: 100%; height: 40px; padding-left:20px;padding-top: 10px;background-color: #c8d6e5;
                 -moz-box-shadow: 0px 0px 2px  #909090;-webkit-box-shadow: 0px 0px 2px  #909090;">
            <span>个人信息设置</span>
            <button class="btn_sel3 glyphicon glyphicon-plus"  style="float: right"></button>
            <span  style="float: right;">编辑&nbsp;&nbsp;</span>
        </div>
        <div style="background-color:#ffffff; border: 1px solid #dbdbdb;height: 450px; display: none">

            <div style="padding-top: 30px;padding-left: 85px">
                <span style="font-size: 12px; font-family: 宋体">头像&nbsp;</span>
                <button id="btn_on3" class="btn_sel33" >上传图片</button>
                <span style="font-size: 12px; font-family: 宋体">仅支持jpg,gif,png格式图片，且文件小于2M。</span>
                <input type="file" id="img-upload"/>
            </div>

            <div style=" margin-top: 30px;margin-left: 125px; height: 230px;width: 230px;
                background: url(../../static/img/user/sculpture.jpg);background-size: 230px 230px">
                <img src="" alt="">
            </div>
            <div style="padding-top: 30px;padding-left: 125px">
                <button id="btn_on4" class="btn_sel33" style="width: 50px; height: 30px">保存</button>
                <span class="glyphicon glyphicon-exclamation-sign" style="color: #74b9ff"></span>
                <span style="font-size: 12px; font-family: 宋体;color: #747d8c ">新头像将在审核后生效</span>
            </div>
        </div>
    </div>

</div>

</body>
</html>